<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
    xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head th:replace="_header_include::frag(~{::title},~{::style},~{})">
    <title>后台管理系统</title>
    <style>
        .chargeBox .el-form-item__content {
            margin-left: 0 !important;
        }

        .chargeBox .el-input__inner {
            width: 50%;
            margin: 0 auto;
        }

        .chargeBox.el-form-item {
            margin-bottom: 13px;
        }

        .chargeBox .el-form-item__error {
            width: 100%;
        }

        @media screen and (min-width: 1659px) {
            .el-table__body-wrapper {
                max-height: 800px;
                overflow-y: auto
            }
        }
        .detailDialog .detailDialogEndTime .el-form-item__label{
            width: 10px !important;
        }
        .detailDialog .el-form-item__label{
            width: auto !important;
        }
        .main-search-box {
            display: flex;
            justify-content: space-between;
            padding-right: 10px;
        }
        .mainSearchBtnBox {
            display: flex;
            justify-content: space-between;
            padding-right: 10px;
        }
        .el-form-item__label {
            width: auto !important
        }
        .el-cascader__label {
            padding: 3px 25px 0 15px;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div id="clueChargeManage" class="clueChargeManage mainPadding" style="display: none;padding-left: 25px;">
        <el-breadcrumb separator="/" class="elBreadcrumb marginB20" style="font-size: 12px;">
            <el-breadcrumb-item>Home</el-breadcrumb-item>
            <el-breadcrumb-item>费用设置</el-breadcrumb-item>
            <el-breadcrumb-item>资源资费设置</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="mainSearchBg">
            <!-- <el-form :inline="true" :model="clueChargeSearchForm" class="demo-form-inline" ref="clueChargeSearchForm">

                <el-form-item label="">
                    <el-button icon="el-icon-search" type="primary" @click="searchTable()" style="margin-left: 10px;">搜索
                    </el-button>
                </el-form-item>
            </el-form> -->
            <div class="mainSearchFormBox">
                <el-form :inline="true" class="demo-form-inline mainSearchForm" :model="clueChargeSearchForm"
                    ref="clueChargeSearchForm">
                    <div class="main-search-box">
                        <el-form-item label="行业类别：" label-width="auto">
                            <el-select v-model="clueChargeSearchForm.industryCategory" filterable clearable
                                placeholder="选择行业类别">
                                <el-option v-for="item in industryOptions" :key="item.value" :label="item.name"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="资源类别：" label-width="auto">
                            <el-select v-model="clueChargeSearchForm.category" filterable clearable
                                placeholder="选择资源类别">
                                <el-option v-for="item in categoryOptions" :key="item.value" :label="item.name"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="媒介：" label-width="auto">
                            <el-select v-model="clueChargeSearchForm.source" filterable clearable placeholder="选择媒介">
                                <el-option v-for="item in mediumOptions" :key="item.value" :label="item.name"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="商家所属：" label-width="auto">
                            <el-select v-model="clueChargeSearchForm.merchantType" filterable clearable
                                placeholder="选择商家所属">
                                <el-option v-for="item in merchantOwnedOptions" :key="item.value" :label="item.name"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="商家账号：" label-width="auto">
                            <el-select v-model="clueChargeSearchForm.mainAccountId" filterable clearable
                                placeholder="选择商家账号">
                                <el-option v-for="item in merchantUserOptions" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="mainSearchBtnBox">

                        <el-form-item label="项目信息:">
                            <el-select clearable v-model="clueChargeSearchForm.projectId" placeholder="请选择" filterable>
                                <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <div>
                            <el-button icon="el-icon-search" type="primary" class="searchBtn" @click="searchTable()">
                                搜索
                            </el-button>
                            <el-button @click="inputReset">重置</el-button>
                        </div>

                    </div>
                </el-form>
            </div>
            <el-row class="marginB20" style="margin: 27px 0 15px 0">
                <el-button class="btnadd" type="primary" @click="seatOperation('add')">添加</el-button>
                <el-button class="btnedit" type="success" @click="seatOperation('edit')">编辑</el-button>
                <el-button class="btnremove" type="danger" @click="seatOperation('delete')">删除</el-button>
            </el-row>
            <el-row>
                <div>
                    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px"
                        class="demo-dynamic">
                        <el-table ref="multipleTable" tooltip-effect="dark" border
                            @selection-change="handleSelectionChange" style="width: 100%"
                            :data="dynamicValidateForm.dataTable">
                            <el-table-column align="center" type="selection" label="序号" width="55"></el-table-column>
                            <el-table-column align="center" type="index" label="序号" width="55"></el-table-column>
                            <el-table-column align="center" prop="chargeName" label="资费名称" min-width="80">
                            </el-table-column>
                            <!-- <el-table-column align="center" prop="id" label="ID" min-width="80">
                            </el-table-column> -->
                            <el-table-column align="center" prop="industryCategoryName" label="行业类别" min-width="80">
                            </el-table-column>
                            <el-table-column align="center" prop="categoryName" label="资源类别" min-width="80">
                            </el-table-column>
                            <el-table-column align="center" prop="sourceName" label="资源媒介" min-width="80">
                            </el-table-column>
                            <el-table-column align="center" prop="charge" label="餐盟币" min-width="95">
                                <!-- <template slot-scope="scope">
                                    <el-form-item :prop="'dataTable.' + scope.$index + '.charge'" :rules='rules.charge'
                                        class="chargeBox">
                                        <el-input v-model="scope.row.charge" :disabled="scope.row.disabled" maxLength="10"
                                            @keyup.native.prevent="number(scope.$index, dynamicValidateForm.dataTable)">
                                        </el-input>
                                    </el-form-item>
                                </template> -->
                            </el-table-column>
                            <el-table-column align="center" prop="merchantType" label="商家所属" min-width="80">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.merchantType==0">全部商家</span>
                                    <span v-if="scope.row.merchantType==1">内部</span>
                                    <span v-if="scope.row.merchantType==2">外部</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="mainAccountName" label="选择商家" min-width="80">
                            </el-table-column>

                            <el-table-column align="center" prop="projectName" label="项目信息" width="150">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.projectName">
                                        <el-popover
                                            placement="top-start"
                                            trigger="hover"
                                            width="200"
                                        >
                                            {{scope.row.projectName}}
                                            <div slot="reference" class="name-wrapper">
                                                {{scope.row.projectName}}
                                            </div>
                                        </el-popover>
                                    </div>
                                    <div v-else>__</div>
                                </template>
                            </el-table-column>

                            <el-table-column align="center" prop="updateTime" label="更新时间" :formatter="dateFormat"
                                min-width="120">
                            </el-table-column>
                            <el-table-column align="center" prop="updateUserName" label="操作人员" min-width="80">
                            </el-table-column>
                            <el-table-column align="center" prop="" label="状态" min-width="80">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.deleted" style="color: red">已删除</span>
                                    <span v-else style="color:blue">正常</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="" label="操作记录" min-width="80">
                                <template slot-scope="scope">
                                   <span style="cursor: pointer;color:blue" @click="lookDetailClick(scope)">查看</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form>
                    <table-pagination :pager="pager"  @change="searchTable" style="text-align:center; ">
                    </table-pagination>
                </div>
            </el-row>
            <!-- 添加编辑坐席弹框@close="closeDialog" -->
            <el-dialog :title="title" :visible.sync="centerDialogVisible" width="540px">
                <el-form :model="subAccountForm" ref="subAccountForm" :rules="rules">
                    <el-form-item label="资费名称：" :label-width="formLabelWidth" prop="iframeseatNo">
                        <el-input maxlength="20" v-model="subAccountForm.iframeseatNo" autocomplete="off"
                            style="width: 290px;"></el-input>
                    </el-form-item>
                    <el-form-item label="行业类别：" :label-width="formLabelWidth" prop="iframecompany">
                        <el-select v-model="subAccountForm.iframecompany" clearable placeholder=""
                            style="width: 290px;">
                            <el-option v-for="item in industryOptions" :key="item.value" :label="item.name"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="资源类别：" :label-width="formLabelWidth" prop="iframeaddress">
                        <el-select v-model="subAccountForm.iframeaddress" clearable placeholder=""
                            style="width: 290px;">
                            <el-option v-for="item in categoryOptions" :key="item.value" :label="item.name"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="资源媒介：" :label-width="formLabelWidth" prop="iframeaccountNo">
                        <el-select v-model="subAccountForm.iframeaccountNo" clearable placeholder=""
                            style="width: 290px;">
                            <el-option v-for="item in mediumOptions" :key="item.value" :label="item.name"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="资源定价/条：" :label-width="formLabelWidth" prop="iframesecretKey">
                        <el-input @keyup.native="inputNumber" maxlength="10" v-model="subAccountForm.iframesecretKey"
                            autocomplete="off" style="width: 290px;"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="资源定价/条：" :label-width="formLabelWidth" prop="iframesecretKey">
                        <el-input  maxlength="10" v-model="subAccountForm.iframesecretKey"
                            autocomplete="off" style="width: 290px;"></el-input>
                    </el-form-item> -->
                    <el-form-item label="商家所属：" :label-width="formLabelWidth" prop="iframemerchantType">
                        <el-select v-model="subAccountForm.iframemerchantType" style="width: 290px;" clearable
                            placeholder="全部商家">
                            <el-option v-for="item in merchantOwnedOptions" :key="item.value" :label="item.name"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="subAccountForm.iframemerchantType==2||subAccountForm.iframemerchantType=='外部'" label="选择商家：" :label-width="formLabelWidth" prop="mainAccountId">
                        <!-- <el-select v-model="subAccountForm.mainAccountId" style="width: 290px;" clearable filterable placeholder="选择商家">
                            <el-option v-for="item in merchantUserOptions" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select> -->
                        <!-- <el-cascader
                            v-model="subAccountForm.mainAccountId"
                            :options="options"
                            @change="handleChange"
                            filterable
                            clearable
                            style="width: 290px;"
                        >

                        </el-cascader> -->
                        <el-cascader 
                            :options="merchantUserProjectList" 
                            @change="handleChange" 
                            filterable 
                            clearable 
                            v-model="subAccountForm.mainAccountId" 
                            style="width: 290px;"
                            @focus="cascaderfocus"
                            @active-item-change="cascaderChange"  
                            popper-class="refSubCat" 
                            >
                        
                        </el-cascader>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:center;">
                    <el-button class="allBtnHover" type="primary" :disabled="submitDisabled"
                        @click="submitForm('subAccountForm')">
                        提交</el-button>
                    <el-button class="cancel" type="primary" @click="cancelClick('subAccountForm')">取消</el-button>
                </div>
            </el-dialog>
            <el-dialog class="detailDialog" title="查看明细" :visible.sync="detailDialogVisible" width="986px">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="修改项：">
                        <el-select v-model="formInline.region" placeholder="全部">
                            <el-option value="全部" label="全部"></el-option>
                            <el-option value="资费状态" label="资费状态"></el-option>
                            <el-option value="资费名称" label="资费名称"></el-option>
                            <el-option value="行业类别" label="行业类别"></el-option>
                            <el-option value="资源类别" label="资源类别"></el-option>
                            <el-option value="资源媒介" label="资源媒介"></el-option>
                            <el-option value="资源定价" label="资源定价"></el-option>
                            <el-option value="商家所属" label="商家所属"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="更新时间：">
                        <el-date-picker
                                v-model="formInline.start"
                                type="datetime"
                                placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item class="detailDialogEndTime" label="-">
                        <el-date-picker
                                v-model="formInline.end"
                                type="datetime"
                                placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item class="detailDialogEndTime" label="">
                        <el-button icon="el-icon-search" type="primary" style="margin-left: 20px" class="searchBtn" @click="lookDetailClick()">
                            搜索
                        </el-button>
                    </el-form-item>
                </el-form>
                <el-table tooltip-effect="dark" border style="width: 100%" :data="detailDataTable">
                    <el-table-column align="center" prop="updateField" label="修改项" min-width="80">
                    </el-table-column>
                    <el-table-column align="center" prop="newValue" label="更改后属性值" min-width="80">
                    </el-table-column>
                    <el-table-column align="center" prop="oldValue" label="更改前属性值" min-width="80">
                    </el-table-column>
                    <el-table-column align="center" prop="noticeEmail" label="通知邮箱" min-width="80">
                    </el-table-column>
                    <el-table-column align="center" prop="createUserName" label="操作人" min-width="80">
                    </el-table-column>
                    <el-table-column align="center" prop="createTime" label="更新时间" :formatter="dateFormat" min-width="120">
                    </el-table-column>
                </el-table>
                <table-pagination :pager="detailPager"  @change="lookDetailClick" style="text-align:center; ">
                </table-pagination>
            </el-dialog>
        </div>
    </div>
    <!-- import common js-->
    <div th:include="_footer_include :: #jsLib"></div>
</body>
<script th:inline="javascript">
    var industryCategoryList = [{ name: '不限', value: '0' }].concat([[${ industryCategoryList }]]);//行业类别
    var categoryList = [{ name: '不限', value: '0' }].concat([[${ categoryList }]]);//资费类别
    var sourceList = [{ name: '不限', value: '0' }].concat([[${ sourceList }]]);//媒介

    var merchantUserList = [[${ merchantUserList }]];
    var projectList = [[${ projectList }]];//项目信息

    var merchantUserProjectList = [[${ merchantUserProjectList }]];//选择商家信息

    let options = []
    if(merchantUserProjectList && merchantUserProjectList.length) {
        options = merchantUserProjectList.map(item => {
           const subChildren = item.children || [];
            const children = subChildren.map(subItem => {
                return {
                   label: subItem.projectName, value: subItem.id
                }

            })
        const params = {
            label: item.name,
            value: item.id
        }
        if(subChildren.length) {
            params.children = children;
        }
        return params;
    })

    }



    console.log('options', options)


    var clueChargeVM = new Vue({
        el: '#clueChargeManage',
        data: {
            timer: null,
            merchantUserProjectList: options,
            projectList: projectList,
            formInline: {
                region: '',
                start:'',
                end:'',
            },
            clueChargeSearchForm: {
                industryCategory: '',
                category: '',
                source: '',
                merchantType: '',
                mainAccountId: '',
                projectId: ''
            },
            categoryOptions: categoryList,
            industryOptions: industryCategoryList,
            mediumOptions: sourceList,
            merchantOwnedOptions: [{ name: '全部商家', value: '0' }, { name: '内部', value: '1' }, { name: '外部', value: '2' }],
            merchantUserOptions: merchantUserList,
            pager: {
                total: 0,
                currentPage: 1,
                pageSize: 20,
            },
            detailPager: {
                total: 0,
                currentPage: 1,
                pageSize: 20,
            },
            subAccountForm: {
                iframeseatNo: "",
                iframecompany: '',
                iframeaddress: '',
                iframeaccountNo: '',
                iframesecretKey: '',
                iframemerchantType: '',
                // mainAccountId: '',
                mainAccountId: []
            },
            title: '添加',
            detailDataTable:[
                // {
                //     id: '1',
                //     chargeName: '奥术大师多撒大所大',
                //     industryCategoryName: '火锅',
                //     categoryName: '联展',
                //     sourceName: '58',
                //     charge: '222',
                //     updateTime: '3333',
                //     updateUserName: '444',
                //     deleted: 1,
                //     merchantType: '内部商家'
                // }
            ],
            detailId:'',
            dynamicValidateForm: {
                dataTable: [],

                // [
                //     {
                //         id: '1',
                //         chargeName: '奥术大师多撒大所大',
                //         industryCategoryName: '火锅',
                //         categoryName: '联展',
                //         sourceName: '58',
                //         charge: '222',
                //         updateTime: '3333',
                //         updateUserName: '444',
                //         deleted: 1,
                //         merchantType: '内部商家'

                //     }, {
                //         id: '1',
                //         chargeName: '8888',
                //         industryCategoryName: '火锅',
                //         categoryName: '联展',
                //         sourceName: '58',
                //         charge: '222',
                //         updateTime: '3333',
                //         updateUserName: '444',
                //         deleted: 1,
                //         merchantType: '内部商家'

                //     }
                // ]
            },
            dialogFormVisible: false,
            centerDialogVisible: false,
            detailDialogVisible:false,
            submitDisabled: false,
            multipleSelection: [],
            formLabelWidth: '150px',
            rules: {
                iframeseatNo: [
                    { required: true, message: '资费名称不能为空', trigger: 'change' },
                    { max: 20, message: '最大20个字符', trigger: 'blur' },
                ],
                iframecompany: [
                    { required: true, message: '行业类别不能为空', trigger: 'change' },
                ],
                iframeaddress: [
                    { required: true, message: '资源类别不能为空', trigger: 'change' },
                ],
                iframeaccountNo: [
                    { required: true, message: '资源媒介不能为空', trigger: 'change' },
                ],
                iframesecretKey: [
                    { required: true, message: '资源定价不能为空', trigger: 'change' },
                ],
                iframemerchantType: [
                    { required: true, message: '商家所属不能为空', trigger: 'change' },
                ],
                mainAccountId:[
                    { required: true, message: '选择商家不能为空', trigger: 'change' },
                ]

            }
        },
        methods: {
            lookDetailClick(scope){
                let that=this

                if(!that.detailDialogVisible){
                    that.detailDialogVisible=true
                    that.formInline.start=''
                    that.formInline.end=''
                    that.formInline.region=''
                }
                const {start,end}=this.formInline
                var startTimestamp = new Date(start);
                var endTimestamp = new Date(end);
                if(end){
                    if (startTimestamp > endTimestamp) {
                        this.$message({
                            message: '开始时间必须小于结束时间',
                            type: 'warning'
                        });
                        return;
                    }
                }

                if(scope){
                    this.detailId=scope.row.id
                }
                let param={
                    pageNum:this.detailPager.currentPage,
                    pageSize:this.detailPager.pageSize,
                    startTime:this.formInline.start,
                    endTime:this.formInline.end,
                    updateField:this.formInline.region,
                    chargeId:this.detailId
                }
                if(param.updateField=='全部'){
                    param.updateField=' '
                }
                axios.post("/merchant/clueChargeManager/queryLogPage", param)
                .then(function (response) {
                    if(response.data.code==0){
                        var table = response.data.data;
                        that.detailDataTable=table.data
                       that.detailPager.total = table.total;
                       that.detailPager.currentPage = table.currentPage;
                    }else{
                        clueChargeVM.$message.error(response.data.msg);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });


            },
            // 输入非数字 校验
            inputNumber() {
                this.subAccountForm.iframesecretKey = this.subAccountForm.iframesecretKey.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
                this.subAccountForm.iframesecretKey = this.subAccountForm.iframesecretKey.replace(/^\./g, ""); //验证第一个字符是数字
                this.subAccountForm.iframesecretKey = this.subAccountForm.iframesecretKey.replace(/\.{2,}/g, "."); //只保留第一个, 清除多余的
                this.subAccountForm.iframesecretKey = this.subAccountForm.iframesecretKey.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                this.subAccountForm.iframesecretKey = this.subAccountForm.iframesecretKey.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
            },
            // 添加编辑删除
            seatOperation(type) {
                if (this.$refs['subAccountForm'] !== undefined) {
                    this.subAccountForm.mainAccountId= []
                    this.$refs['subAccountForm'].resetFields();
                }
                switch (type) {
                    case 'add':
                        this.subAccountForm.iframeseatNo = ''
                        this.subAccountForm.iframecompany = '不限'
                        this.subAccountForm.iframeaddress = '不限'
                        this.subAccountForm.iframeaccountNo = '不限'
                        this.subAccountForm.iframesecretKey = ''
                        this.subAccountForm.iframemerchantType = '全部商家'
                        this.subAccountForm.mainAccountId = []
                        this.title = '添加资费设置'
                        this.centerDialogVisible = true
                        break;
                    case 'edit':
                        this.title = '编辑资费设置'
                        if (this.multipleSelection.length === 1) {
                            const { chargeName, category, industryCategory, charge, merchantType, source,mainAccountId } = this.multipleSelection[0]
                            this.subAccountForm.iframeseatNo = chargeName
                            this.subAccountForm.iframecompany = industryCategory
                            this.subAccountForm.iframeaddress = category
                            this.subAccountForm.iframeaccountNo = source
                            this.subAccountForm.iframesecretKey = charge
                            this.subAccountForm.mainAccountId= [mainAccountId]
                            this.subAccountForm.iframemerchantType = merchantType == 0 ? '全部商家' : merchantType == 1 ? '内部' : '外部'
                            this.centerDialogVisible = true
                        } else if (this.multipleSelection.length === 0) {
                            clueChargeVM.$message.warning('请选择一条数据进行修改');
                        } else {
                            clueChargeVM.$message.warning('只允许选择一条数据进行编辑');

                        }
                        break;
                    case 'delete':
                        this.open()
                        break;
                    default: return '';

                }
            },

            // 确认删除弹框
            open() {
                var that = this
                if (this.multipleSelection.length >= 1) {
                    this.$confirm('确认删除所选资费设置吗?').then(() => {
                        var idList = []
                        for (var i = 0; i < that.multipleSelection.length; i++) {
                            if (that.multipleSelection[i].id) {
                                idList.push(that.multipleSelection[i].id)
                            }
                        }
                        axios.post('/merchant/clueChargeManager/delete', { idList })
                            .then(function (response) {
                                that.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                that.searchTable()
                            })
                            .catch(function (error) {
                                console.log(error);
                            });

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                } else {
                    clueChargeVM.$message.warning('请正确选择');
                }
            },

            // 提交
            submitForm(formName) {
                console.log(this.subAccountForm);
                this.$refs[formName].validate((valid) => {
                    console.log(valid);
                })
                var that = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var param = {};
                        param.chargeName = this.subAccountForm.iframeseatNo
                        param.industryCategory = this.selectionValue(this.subAccountForm.iframecompany, this.industryOptions)
                        param.category = this.selectionValue(this.subAccountForm.iframeaddress, this.categoryOptions)
                        param.source = this.selectionValue(this.subAccountForm.iframeaccountNo, this.mediumOptions)
                        param.charge = this.subAccountForm.iframesecretKey
                        param.merchantType = this.selectionValue(this.subAccountForm.iframemerchantType, this.merchantOwnedOptions)
                        if(param.merchantType==2){
                            param.mainAccountId = this.subAccountForm.mainAccountId[0]
                        }
                        if (this.title === '编辑资费设置') {
                            param.id = this.multipleSelection[0].id
                        }
                        axios.post('/merchant/clueChargeManager/saveClueCharge', param)
                            .then(function (response) {
                                var result = response.data;
                                if (result.code == 0) {
                                    console.log(result);
                                    clueChargeVM.$message({
                                        type: 'success', message: '保存成功!', duration: 500, onClose: function () {
                                            that.searchTable()
                                            that.centerDialogVisible = false
                                            if (that.$refs['subAccountForm'] !== undefined) {
                                                that.$refs['subAccountForm'].resetFields();
                                            }
                                        }
                                    });

                                } else {
                                    clueChargeVM.$message.error(result.msg);
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    } else {
                        // alert('错误');
                    }
                })
            },


            // 取消添加坐席提交
            cancelClick(formName) {
                this.centerDialogVisible = false;
                if (this.$refs['subAccountForm'] !== undefined) {
                    this.$refs['subAccountForm'].resetFields();
                }
            },

            inputReset() {
                var newClueChargeSearchForm = {
                    industryCategory: '',
                    category: '',
                    source: '',
                    merchantType: '',
                }
                this.clueChargeSearchForm = newClueChargeSearchForm
                this.searchTable()
            },

            // 请求列表数据
            searchTable() {
                var that = this
                var param = {};
                param.pageNum = this.pager.currentPage
                param.pageSize = this.pager.pageSize;
                param.industryCategory = this.clueChargeSearchForm.industryCategory;
                param.category = this.clueChargeSearchForm.category;
                param.source = this.clueChargeSearchForm.source;
                param.merchantType = this.clueChargeSearchForm.merchantType;
                param.mainAccountId = this.clueChargeSearchForm.mainAccountId;
                param.projectId = this.clueChargeSearchForm.projectId;

                // console.info(param);
                axios.post('/merchant/clueChargeManager/queryPage', param)
                    .then(function (response) {
                        var result = response.data;
                        if (result.code == 0) {
                            var table = result.data;
                            that.dynamicValidateForm.dataTable = table.data
                            that.pager.total = table.total;
                            that.pager.currentPage = table.currentPage;
                        } else {
                            clueChargeVM.$message.error(result.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            },

            //选择一条数据
            handleSelectionChange(val) {
                this.multipleSelection = val;

            },

            //日期数据格式化方法
            dateFormat(row, column, cellValue, index) {
                if (cellValue == undefined) {
                    return "";
                }
                return moment(cellValue).format("YYYY-MM-DD HH:mm:ss");
            },


            // 选择框转化关系
            selectionValue(data, allData) {
                var value = '';
                for (var i = 0; i < allData.length; i++) {
                    if (allData[i].name == data || allData[i].value == data) {
                        value = allData[i].value
                    }
                }
                return value
            },
            handleChange(value) {
                this.subAccountForm.mainAccountId = [value[0]];
            },
            cascaderChange(value) {
                console.log(value)
                this.subAccountForm.mainAccountId = [value[0]];
                this.timer = setTimeout(() => {
                    document.getElementsByClassName('refSubCat')[0].style.display = 'none';
                    clearInterval(this.timer)
                }, 500)
            },
            cascaderfocus() {
                if(document.getElementsByClassName('refSubCat')[0] && document.getElementsByClassName('refSubCat')[0].style) {
                    document.getElementsByClassName('refSubCat')[0].style.display = 'block';
                }

            }
        },
        created() {
            this.searchTable();
        },
        mounted() {
            document.getElementById('clueChargeManage').style.display = 'block';
        }
    })

</script>

</html>